<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar center title="登录" left-arrow />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group>
        <!-- 手机号 -->
        <van-field
          v-model="userInfo.mobile"
          type="tel"
          label="手机号"
          name="pattern"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            { pattern, message: '手机格式不正确' }
          ]"
        />
        <!-- 验证码 -->
        <van-field
          v-model="userInfo.code"
          center
          clearable
          name="validator"
          label="验证码"
          placeholder="请输入短信验证码"
          :rules="[{ validator, message: '验证码不正确' }]"
        >
          <van-button
            slot="button"
            size="small"
            type="primary"
            :disabled="disabled"
            :loading="loading"
            :loading-text="text"
            @click="sendCode"
          >
            发送验证码
          </van-button>
        </van-field>
      </van-cell-group>
      <!-- 登录按钮 -->
      <div class="btn">
        <van-button round block size="small" type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 引入登录接口 getCode
import { login } from "@/api/user.js";
export default {
  data() {
    //mobile: "13912345678",
    //code: "246810"
    return {
      userInfo: {
        mobile: "13912345678",
        code: "246810"
      },
      pattern: /^1[3-9][0-9]{9}$/,
      disabled: false,
      loading: false,
      text: ""
    };
  },
  methods: {
    // 验证码验证
    validator(val) {
      return /^[0-9]{6}$/.test(val);
    },
    // 获取验证码
    async sendCode() {
      // 禁用按钮
      this.disabled = true;
      this.loading = true;
      // 显示验证码已发送并倒计时
      let num = 10;
      this.text = `验证码已发送 ${num}`;
      let stop = setInterval(() => {
        num--;
        this.text = `验证码已发送${num}`;
        if (num < 1) {
          clearInterval(stop);
          this.disabled = false;
          this.loading = false;
          this.text = "发送验证码";
        }
      }, 1000);
      // 请求接口
      // const res = await getCode(this.userInfo.mobile);
      // console.log(res);
      // 恢复按钮的内容
      // 恢复按钮可点击
    },
    onSubmit(value) {
      // 如果表单项没有通过验证，不会提交，都通过了才提交
      console.log(value);
      this.goLogin();
    },
    async goLogin() {
      //获取表单信息
      // 表单验证
      // loading
      try {
        const res = await login(this.userInfo);
        console.log(res);
        // 存到vuex中
        this.$store.commit("sToken", res.data.data);
        // 提示登录成功
        this.$toast.success("登录成功");
        // 跳转页面
        let url = this.$route.query.backto;
        // 判断是否从别的页面跳过来的
        if (url) {
          this.$router.push(url);
        } else {
          this.$router.push({
            path: "/"
          });
        }
      } catch (err) {
        console.log(err);
        // 提示登录失败
        this.$toast.fail("登录失败");
      }
    }
  },
  mounted() {
    console.log(this.$route);
  }
};
</script>

<style lang="less" scoped>
.btn {
  margin: 10px;
}
.van-nav-bar {
  background-color: #1989fa;
  /deep/.van-icon {
    color: #fff;
  }
}
</style>
